<template>
    <div class="app-container">
        <div class="screens">
            <div class="titles">统计筛选</div>
            <div class="screenbox">
                <el-cascader
                    style="display: inline-block; margin-left: 20px"
                    :options="deptOptions"
                    v-model="deptId"
                    :props="{ value: 'id', checkStrictly: true }"
                    :show-all-levels="false"
                    placeholder="请选择部门"
                    change-on-select
                    clearable
                    filterable
                    @change="handleChange"
                >
                </el-cascader>
                <el-select
                    style="display: inline-block; margin-left: 20px"
                    v-model="queryParams.projectId"
                    clearable
                    filterable
                    placeholder="请选择项目"
                >
                    <el-option
                        v-for="item in projectLists"
                        :key="item.id"
                        :label="item.projectname"
                        :value="item.id"
                    >
                    </el-option>
                </el-select>
                <el-date-picker
                    style="margin-left: 20px; display: inline-block"
                    @change="SimeSlotChange"
                    v-model="TimeSlot"
                    type="daterange"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    :clearable="false"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                >
                </el-date-picker>
                <el-button
                    style="margin-left: 20px; display: inline-block"
                    type="primary"
                    @click="Statistics"
                    >查询</el-button
                >
            </div>
        </div>
        <div class="CostSummary">
          <div class="CostSummarytitles"><h4 style="display: inline;">费用概要</h4> {{queryParams.dateStart.replace(/-/g,"/")}} - {{queryParams.dateEnd.replace(/-/g,"/")}}</div>
            <div class="CostSummaryCentent">
                <div class="CostSummaryCentent_item">
                    <div class="CostSummaryCentent_item_title">
                        非信创总额
                        <!-- <img src="../../../assets/icons/uparrow.png" alt="" /> -->
                    </div>
                    <div class="CostSummaryCentent_item_Number">
                        {{notXc.total}}<span style="font-size: 16px">万</span>
                    </div>
                    <!-- <div class="CostSummaryCentent_item_Proportion">+0%</div> -->
                    <div class="CostSummaryCentent_item_Chart">
                        <div :style="`width:${(Number(notXc.H3C) / Number(notXc.total) * 100).toFixed(2)}%`" class="wbj-progress-bar1"></div>
                        <div :style="`width:${(Number(notXc.Sugon) / Number(notXc.total) * 100).toFixed(2)}%`" class="wbj-progress-bar2"></div>
                        <div :style="`width:${(Number(notXc.Inspur) / Number(notXc.total) * 100).toFixed(2)}%`" class="wbj-progress-bar3"></div>
                    </div>
                </div>
                <div class="CostSummaryCentent_item">
                    <div class="CostSummaryCentent_item_title">
                        新华三
                        <!-- <img src="../../../assets/icons/uparrow.png" alt="" /> -->
                    </div>
                    <div class="CostSummaryCentent_item_Number">
                        {{notXc.H3C}}<span style="font-size: 16px">万</span>
                    </div>
                    <!-- <div class="CostSummaryCentent_item_Proportion">+0%</div> -->
                    <div class="CostSummaryCentent_item_Chart">
                        <div :style="`width:${(Number(notXc.H3C) / Number(notXc.total) * 100).toFixed(2)}%`" class="wbj-progress-bar1"></div>
                    </div>
                </div>
                <div class="CostSummaryCentent_item">
                    <div class="CostSummaryCentent_item_title">
                        曙光
                        <!-- <img src="../../../assets/icons/uparrow.png" alt="" /> -->
                    </div>
                    <div class="CostSummaryCentent_item_Number">
                        {{notXc.Sugon}}<span style="font-size: 16px">万</span>
                    </div>
                    <!-- <div class="CostSummaryCentent_item_Proportion">+0%</div> -->
                    <div class="CostSummaryCentent_item_Chart">
                        <div :style="`width:${(Number(notXc.Sugon) / Number(notXc.total) * 100).toFixed(2)}%`" class="wbj-progress-bar2"></div>
                    </div>
                </div>
                <div class="CostSummaryCentent_item">
                    <div class="CostSummaryCentent_item_title">
                        浪潮
                        <!-- <img src="../../../assets/icons/uparrow.png" alt="" /> -->
                    </div>
                    <div class="CostSummaryCentent_item_Number">
                        {{notXc.Inspur}}<span style="font-size: 16px">万</span>
                    </div>
                    <!-- <div class="CostSummaryCentent_item_Proportion">+0%</div> -->
                    <div class="CostSummaryCentent_item_Chart">
                        <div :style="`width:${(Number(notXc.Inspur) / Number(notXc.total) * 100).toFixed(2)}%`" class="wbj-progress-bar3"></div>
                    </div>
                </div>
                <div class="CostSummaryCentent_item">
                    <div class="CostSummaryCentent_item_title">
                        信创总额
                        <!-- <img src="../../../assets/icons/uparrow.png" alt="" /> -->
                    </div>
                    <div class="CostSummaryCentent_item_Number">
                        {{xc.total}}<span style="font-size: 16px">万</span>
                    </div>
                    <!-- <div class="CostSummaryCentent_item_Proportion">+0%</div> -->
                    <div class="CostSummaryCentent_item_Chart">
                        <div :style="`width:${(Number(xc.H3C) / Number(xc.total) * 100).toFixed(2)}%`" class="wbj-progress-bar1"></div>
                        <div :style="`width:${(Number(xc.Sugon) / Number(xc.total) * 100).toFixed(2)}%`" class="wbj-progress-bar2"></div>
                        <div :style="`width:${(Number(xc.Inspur) / Number(xc.total) * 100).toFixed(2)}%`" class="wbj-progress-bar3"></div>
                    </div>
                </div>
                <div class="CostSummaryCentent_item">
                    <div class="CostSummaryCentent_item_title">
                        新华三
                        <!-- <img src="../../../assets/icons/uparrow.png" alt="" /> -->
                    </div>
                    <div class="CostSummaryCentent_item_Number">
                        {{xc.H3C}}<span style="font-size: 16px">万</span>
                    </div>
                    <!-- <div class="CostSummaryCentent_item_Proportion">+0%</div> -->
                    <div class="CostSummaryCentent_item_Chart">
                        <div :style="`width:${(Number(xc.H3C) / Number(xc.total) * 100).toFixed(2)}%`" class="wbj-progress-bar1"></div>
                    </div>
                </div>
                <div class="CostSummaryCentent_item">
                    <div class="CostSummaryCentent_item_title">
                        曙光
                        <!-- <img src="../../../assets/icons/uparrow.png" alt="" /> -->
                    </div>
                    <div class="CostSummaryCentent_item_Number">
                        {{xc.Sugon}}<span style="font-size: 16px">万</span>
                    </div>
                    <!-- <div class="CostSummaryCentent_item_Proportion">+0%</div> -->
                    <div class="CostSummaryCentent_item_Chart">
                        <div :style="`width:${(Number(xc.Sugon) / Number(xc.total) * 100).toFixed(2)}%`" class="wbj-progress-bar2"></div>
                    </div>
                </div>
                <div class="CostSummaryCentent_item">
                    <div class="CostSummaryCentent_item_title">
                        浪潮
                        <!-- <img src="../../../assets/icons/uparrow.png" alt="" /> -->
                    </div>
                    <div class="CostSummaryCentent_item_Number">
                        {{xc.Inspur}}<span style="font-size: 16px">万</span>
                    </div>
                    <!-- <div class="CostSummaryCentent_item_Proportion">+0%</div> -->
                    <div class="CostSummaryCentent_item_Chart">
                        <div :style="`width:${(Number(xc.Inspur) / Number(xc.total) * 100).toFixed(2)}%`" class="wbj-progress-bar3"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="Cost_trend_chart">
            <div class="Cost_trend_chart_title">
              <h4 style="display: inline;">费用趋势图</h4> {{queryParams.dateStart.replace(/-/g,"/")}} - {{queryParams.dateEnd.replace(/-/g,"/")}}
            </div>
            <div class="Cost_trend_chart_Chart" id="CostTrendChart"></div>
        </div>
        <div class="Daily_details">
            <div class="Daily_details_title">
              <h4 style="display: inline;">每日详情</h4> {{queryParams.dateStart.replace(/-/g,"/")}} - {{queryParams.dateEnd.replace(/-/g,"/")}}
              <el-button
                size="mini"
                type="text"
                icon="el-icon-download"
                @click="ExportDailyDetails"
                style="float: right; margin-right: 20px; margin-top: 5px; display: block;"
              >下载表格</el-button>
            </div>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="timeTag" label="时间">
                </el-table-column>
                <el-table-column prop="resourceName" label="资源名称">
                </el-table-column>
                <el-table-column prop="h3cMoney" label="新华三(元)">
                </el-table-column>
                <el-table-column prop="inspurMoney" label="浪潮(元)">
                </el-table-column>
                <el-table-column prop="sugonMoney" label="曙光(元)">
                </el-table-column>
                <el-table-column prop="totalMoney" label="累计(元)">
                </el-table-column>
            </el-table>
            <pagination
                v-show="total > 0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="Statisticsdetails"
            />
        </div>
    </div>
</template>

<script>
import { treeselect } from "@/api/system/dept";
import { projectList } from "@/api/cloud/object";
import {
    dailyMoney,
    details,
    totalMoney,
    exportdetails,
} from "@/api/CostChart/index";
import echarts from "echarts";
export default {
    data() {
        return {
            // 部门数据
            deptOptions: [],
            deptId: null,
            TimeSlot: "",
            queryParams: {
                pageNum: 1,
                pageSize: 5,
            },
            // 项目数据
            projectLists: [],
            total: 5,
            tableData: [],
            notXc:{

            },
            xc:{

            },
            H3CData:[],
            InspurData:[],
            SugonData:[],
            subList:[],
        };
    },
    created() {
        // 开始时间
        var date=new Date();
        date.setDate(1);
        var startDataStr = date.getFullYear() + '-' + ((date.getMonth() + 1) > 9?(date.getMonth() + 1): '0'+(date.getMonth() + 1))  + '-' + (date.getDate() > 9? date.getDate() : '0' + date.getDate())
        // 结束时间
        var datas =new Date();
        var endDataStr = datas.getFullYear() + '-' + ((datas.getMonth() + 1) > 9?(datas.getMonth() + 1): '0'+(datas.getMonth() + 1)) + '-' + (datas.getDate() > 9? datas.getDate() : '0' + datas.getDate())
        this.TimeSlot = [startDataStr,endDataStr]
        this.SimeSlotChange(this.TimeSlot)
        // 获取部门数据
        treeselect().then((res) => {
            this.deptOptions = res.data;
        });
        // 获取项目列表
        projectList({ pageNum: 1, pageSize: 10000000 }).then((res) => {
            this.projectLists = res.rows;
        });
        this.Statistics();
    },
    mounted() {
        this.CostTrendChart();
    },
    methods: {
        // 导出每日详情
        ExportDailyDetails(){
            exportdetails(this.queryParams).then(res=>{
                this.download(res.msg);
            })
        },
        getDatalist() {},
        Statistics() {
            if(!this.queryParams.dateStart && !this.queryParams.dateEnd){
                this.$message({
                    message: '请选择时间范围',
                    type: 'warning'
                });
                return
            }
            dailyMoney(this.queryParams).then((res) => {
                this.H3CData = res.data.H3C
                this.InspurData = res.data.Inspur
                this.SugonData = res.data.Sugon
                this.subList = res.data.subList
                this.CostTrendChart(res.data.H3C,res.data.Inspur,res.data.Sugon,res.data.subList)
            });
            details(this.queryParams).then((res) => {
                this.tableData = res.rows
                this.total = res.total
            });
            totalMoney(this.queryParams).then((res) => {
                if(res.data){
                    this.notXc = res.data.notXc
                    this.xc = res.data.xc
                }
            });
        },
        Statisticsdetails(){
            details(this.queryParams).then((res) => {
                this.tableData = res.rows
                this.total = res.total
            });
        },
        CostTrendChart(H3C,Inspur,Sugon,subList) {
            var myChart = echarts.init(
                document.getElementById("CostTrendChart")
            );
            const colorList = [
                "rgb(32,144,251)",
                "rgb(83,201,117)",
                "rgb(249,208,75)",
            ];
            var option = {
                backgroundColor: "#fff",
                legend: {
                    icon: "circle",
                    left: "45%",
                    bottom: "3%",
                    itemWidth: 6,
                    itemGap: 20,
                    textStyle: {
                        color: "#556677",
                    },
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        label: {
                            show: true,
                            backgroundColor: "#fff",
                            color: "#556677",
                            borderColor: "rgba(0,0,0,0)",
                            shadowColor: "rgba(0,0,0,0)",
                            shadowOffsetY: 0,
                        },
                        lineStyle: {
                            width: 0,
                        },
                    },
                    backgroundColor: "#fff",
                    textStyle: {
                        color: "#5c6c7c",
                    },
                    padding: [10, 10],
                    extraCssText:
                        "box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)",
                },
                grid: {
                    left: "3%",
                    top: "5%",
                    right: "3%",
                    bottom: "20%",
                },
                xAxis: [
                    {
                        type: "category",
                        data: subList,
                        axisLine: {
                            lineStyle: {
                                color: "#DCE2E8",
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            interval: 0,
                            textStyle: {
                                color: "#556677",
                            },
                            // 默认x轴字体大小
                            fontSize: 12,
                            // margin:文字到x轴的距离
                            margin: 15,
                        },
                        axisPointer: {
                            label: {
                                // padding: [11, 5, 7],
                                padding: [0, 0, 10, 0],
                                /*
    除了padding[0]建议必须是0之外，其他三项可随意设置

    和CSSpadding相同，[上，右，下，左]

    如果需要下边线超出文字，设左右padding即可，注：左右padding最好相同

    padding[2]的10:

    10 = 文字距下边线的距离 + 下边线的宽度

    如：UI图中文字距下边线距离为7 下边线宽度为2

    则padding: [0, 0, 9, 0]

                */
                                // 这里的margin和axisLabel的margin要一致!
                                margin: 15,
                                // 移入时的字体大小
                                fontSize: 12,
                                backgroundColor: {
                                    type: "linear",
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: "#fff", // 0% 处的颜色
                                        },
                                        {
                                            // offset: 0.9,
                                            offset: 0.86,
                                            /*
0.86 = （文字 + 文字距下边线的距离）/（文字 + 文字距下边线的距离 + 下边线的宽度）

                        */
                                            color: "#fff", // 0% 处的颜色
                                        },
                                        {
                                            offset: 0.86,
                                            color: "#33c0cd", // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: "#33c0cd", // 100% 处的颜色
                                        },
                                    ],
                                    global: false, // 缺省为 false
                                },
                            },
                        },
                        boundaryGap: false,
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#DCE2E8",
                            },
                        },
                        axisLabel: {
                            textStyle: {
                                color: "#556677",
                            },
                        },
                        splitLine: {
                            show: false,
                        },
                    },
                    {
                        type: "value",
                        position: "right",
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            textStyle: {
                                color: "#556677",
                            },
                            formatter: "{value}",
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#DCE2E8",
                            },
                        },
                        splitLine: {
                            show: false,
                        },
                    },
                ],
                series: [
                    {
                        name: "新华三云",
                        type: "line",
                        data: H3C,
                        symbolSize: 1,
                        symbol: "circle",
                        smooth: true,
                        yAxisIndex: 0,
                        showSymbol: false,
                        lineStyle: {
                            width: 2,
                            color: new echarts.graphic.LinearGradient(
                                0,
                                1,
                                0,
                                0,
                                [
                                    {
                                        offset: 0,
                                        color: "rgb(32,144,251)",
                                    },
                                    {
                                        offset: 1,
                                        color: "rgb(32,144,251)",
                                    },
                                ]
                            ),
                            shadowColor: "rgba(32,144,251, 0.3)",
                            shadowBlur: 10,
                            shadowOffsetY: 20,
                        },
                        itemStyle: {
                            normal: {
                                color: colorList[0],
                                borderColor: colorList[0],
                            },
                        },
                    },
                    {
                        name: "浪潮云",
                        type: "line",
                        data: Inspur,
                        symbolSize: 1,
                        symbol: "circle",
                        smooth: true,
                        yAxisIndex: 0,
                        showSymbol: false,
                        lineStyle: {
                            width: 2,
                            color: new echarts.graphic.LinearGradient(
                                1,
                                1,
                                0,
                                0,
                                [
                                    {
                                        offset: 0,
                                        color: "rgb(83,201,117)",
                                    },
                                    {
                                        offset: 1,
                                        color: "rgb(83,201,117)",
                                    },
                                ]
                            ),
                            shadowColor: "rgba(83,201,117, 0.3)",
                            shadowBlur: 10,
                            shadowOffsetY: 20,
                        },
                        itemStyle: {
                            normal: {
                                color: colorList[1],
                                borderColor: colorList[1],
                            },
                        },
                    },
                    {
                        name: "曙光云",
                        type: "line",
                        data: Sugon,
                        symbolSize: 1,
                        symbol: "circle",
                        smooth: true,
                        yAxisIndex: 0,
                        showSymbol: false,
                        lineStyle: {
                            width: 2,
                            color: new echarts.graphic.LinearGradient(
                                1,
                                1,
                                0,
                                0,
                                [
                                    {
                                        offset: 0,
                                        color: "rgb(249,208,75)",
                                    },
                                    {
                                        offset: 1,
                                        color: "rgb(249,208,75)",
                                    },
                                ]
                            ),
                            shadowColor: "rgba(249,208,75, 0.3)",
                            shadowBlur: 10,
                            shadowOffsetY: 20,
                        },
                        itemStyle: {
                            normal: {
                                color: colorList[2],
                                borderColor: colorList[2],
                            },
                        },
                    },
                ],
            };
            myChart.setOption(option);
        },
        // 时间段选值赋值
        SimeSlotChange(val) {
            if (val) {
                this.queryParams.dateStart = val[0];
                this.queryParams.dateEnd = val[1];
            } else {
                this.queryParams.dateStart = null;
                this.queryParams.dateEnd = null;
            }
        },
        handleChange(row) {
            if (row.length == 0) {
                this.queryParams.deptId = null;
            } else if (row.length == 1) {
                this.queryParams.deptId = row[0];
            } else {
                this.queryParams.deptId = row[row.length - 1];
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.app-container {
    background-color: rgb(243, 243, 255);
    width: 100%;
    height: 100%;
    // 搜索选项框
    .screens {
        box-sizing: border-box;
        width: 100%;
        height: 90px;
        background-color: #fff;
        border: 1px solid rgb(231, 231, 230);
        margin-bottom: 16px;
        .titles {
            width: 100%;
            height: 35px;
            line-height: 35px;
            margin-left: 20px;
        }
        .screenbox {
            width: 100%;
            height: 55px;
            line-height: 55px;
            margin-left: 20px;
        }
    }
    // 费用概要
    .CostSummary {
        box-sizing: border-box;
        width: 100%;
        height: 300px;
        background-color: #fff;
        border: 1px solid rgb(231, 231, 230);
        margin-bottom: 16px;
        .CostSummarytitles {
            width: 100%;
            height: 40px;
            line-height: 40px;
            margin-left: 20px;
        }
        .CostSummaryCentent {
            box-sizing: border-box;
            width: calc(100% - 30px);
            margin: 0 15px;
            height: 240px;
            display: flex;
            flex-flow: wrap;
            .CostSummaryCentent_item {
                box-sizing: border-box;
                border: 1px solid rgb(231, 231, 230);
                width: 25%;
                height: 120px;
                .CostSummaryCentent_item_title {
                    width: 100%;
                    height: 30px;
                    position: relative;
                    line-height: 30px;
                    padding-left: 24px;
                    font-size: 16px;
                    box-sizing: border-box;
                    color: rgb(163, 163, 163);
                    img {
                        position: absolute;
                        width: 15px;
                        height: 15px;
                        top: 8px;
                        right: 40px;
                        transform: rotate(90deg);
                    }
                }
                .CostSummaryCentent_item_Number {
                    width: 100%;
                    padding-left: 24px;
                    height: 40px;
                    line-height: 40px;
                    font-size: 24px;
                    font-weight: bold;
                    color: #000;
                }
                .CostSummaryCentent_item_Proportion {
                    width: 100%;
                    height: 20px;
                    line-height: 20px;
                    box-sizing: border-box;
                    font-size: 14px;
                    color: rgb(163, 163, 163);
                    padding-left: 24px;
                }
                .CostSummaryCentent_item_Chart {
                    width: 70%;
                    height: 6px;
                    position: relative;
                    top: 8px;
                    left: 50%;
                    transform: translateX(-50%);
                    background-color: rgb(228, 228, 228);
                    box-shadow: none;
                    border: none;
                    display: flex;
                    .wbj-progress-bar1 {
                        // width: 33.33%;
                        background: linear-gradient(
                            to top right,
                            rgb(249, 99, 100) 0%,
                            rgb(249, 99, 100) 100%
                        );
                        height: 100%;
                    }
                    .wbj-progress-bar2 {
                        // width: 33.33%;
                        background: linear-gradient(
                            to top right,
                            rgb(253, 191, 75) 0%,
                            rgb(253, 191, 75) 100%
                        );
                        height: 100%;
                    }
                    .wbj-progress-bar3 {
                        // width: 33.33%;
                        background: linear-gradient(
                            to top right,
                            rgb(92, 165, 244) 0%,
                            rgb(92, 165, 244) 100%
                        );
                        height: 100%;
                    }
                }
            }
        }
    }
    .Cost_trend_chart {
        box-sizing: border-box;
        width: 100%;
        height: 360px;
        background-color: #fff;
        border: 1px solid rgb(231, 231, 230);
        margin-bottom: 16px;
        .Cost_trend_chart_title {
            width: 100%;
            height: 40px;
            line-height: 40px;
            padding-left: 20px;
        }
        .Cost_trend_chart_Chart {
            width: 100%;
            height: 320px;
        }
    }
    .Daily_details {
        width: 100%;
        height: 380px;
        background-color: #fff;
        border: 1px solid rgb(231, 231, 230);
        .Daily_details_title {
            width: 100%;
            height: 40px;
            line-height: 40px;
            padding-left: 20px;
        }
    }
}
</style>
